<template>
  <el-dialog title="分配角色" v-model="props.visible" :before-close="beforeClose">
    <el-form :model="form">
      <ul class="input">
        <li>
          <span>角色名称</span><el-input v-model="form.name" placeholder="请输入角色名称" />
        </li>
        <li class="text">
          <span>描述:</span>
          <el-input class="input_btn" v-model="form.description" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
            placeholder="请输入描述" />
        </li>
      </ul>
    </el-form>
    <!--  -->
    <span class="text-span">是否启用:</span>
    <el-radio-group v-model="form.status">
      <el-radio label="1" size="large">是</el-radio>
      <el-radio label="2" size="large">否</el-radio>
    </el-radio-group>
    <!-- 按钮 -->
    <div class="btn">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </div>
  </el-dialog>
  <!-- <el-dialog v-model="props.assign" title="分配角色" :before-close="cancel">
        <el-select v-model="value1" multiple placeholder="请选择" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary">确定</el-button>
            </span>
        </template>
    </el-dialog> -->
</template>

<script setup lang="ts">
import * as api from "../../json/request/api";
import { defineProps, watch, ref, reactive, withDefaults } from "vue";
import type { Ref } from "vue";
import {
  IAdminListItem,
  IRoleListItem,
} from "../../json/request/QmsAdminConreiller/index";

// 父传子
let props = withDefaults(
  defineProps<{
    visible: boolean;
    form: IAdminListItem;
  }>(),
  {
    visible: true,
  }
);

// 添加用户表单数据
const form = ref({}) as Ref<IAdminListItem>;
const originForm = ref({}) as Ref<IAdminListItem>;

// 监听事件
watch(
  () => props.form,
  (newVal) => {
    // console.log(newVal);
    form.value = { ...newVal };
    originForm.value = { ...newVal };
  }
);

// 自定义事件
const emits = defineEmits<{
  (event: "cancel"): void;
  (event: "confirms", row: IAdminListItem): void;
}>();

let beforeClose = (done: any) => {
  console.log("beforeClose");
  emits("cancel");
};

// 取消
let onCancel = () => {
  // 清空 实际上是点击取消的时候，将form恢复成备份的值
  form.value = { ...originForm.value };
  emits("cancel");
};

// 确定
let onConfirm = () => {
  console.log(form.value);
  // console.log(row);
  emits("confirms", form.value);
};

// 关闭对话框
// const cancel = () => {
//     form.value = { ...originForm.value }
//     emits("changeAssign", false);
// }
</script>

<style lang="scss" scoped>
.input {
  .el-input {
    margin-left: 10px;
    width: 100%;
  }

  span {
    margin-left: 30px;
    width: 50px;
  }

  li {
    margin-top: 20px;
    display: flex;
  }

  .text {
    display: flex;
    width: 100%;

    .text-input {
      margin-left: 10px;
    }
  }

  .input_btn {
    margin-left: 10px;
  }
}

.el-input {
  width: 400px;
  font-size: 14px;
}

.btn {
  float: right;
  margin-top: 60px;
}

.text-span {
  margin-left: 35px;
}

.el-radio-group {
  padding: 20px;
}

.input span {
  width: 80px;
}
</style>
